import {ScrollView, View} from '@tarojs/components'
import {inject, observer} from 'mobx-react'

import './index.less'
import BaseComponent from "../../BaseComponent";
import BleDeviceService from "../../../service/BleDeviceService";
import {AtButton} from "taro-ui";
import {observable} from "mobx";
import LogService from "../../../service/LogService";
import DeviceConfig from "../../../config/DeviceConfig";
import BluDeviceComService from "../../../service/BluDeviceComService";


@inject('store')
@observer
class Device extends BaseComponent {

  @observable devices = [];
  @observable isScan = false;
  intervalNUmb = -1;

  getTag() {
    return "Device";
  }

  // onLoad
  onLoad() {
    super.onLoad();
    BleDeviceService.openBlu();
  }

  componentDidMount() {
    super.componentDidMount();

    this.intervalNUmb = setInterval(() => {
      if (this.isScan) {
        BleDeviceService.getBluetoothDevices(DeviceConfig.DEVICE_NAME, (res) => {

          res.forEach(device => {
            let flag = 0;
            for (let i = 0; i < this.devices.length; i++) {
              if (this.devices[i].deviceId == device.deviceId) {
                flag = 1;
                break;
              }
            }
            if (flag == 0) {
              this.devices.push(device);
            }
          });
        })
        LogService.debug("getBluetoothDevices");
      }
    }, 500);

    // this.devices.push({name: "shan"});
  }

  componentWillMount() {
    super.componentWillMount();
    this.stopscan();
    if (this.intervalNUmb != -1)
      clearInterval(this.intervalNUmb);
  }

  scan = () => {
    BluDeviceComService.disconnetBlue();
    this.devices.splice(0, this.devices.length);
    BleDeviceService.scan();
    this.isScan = true;
  }

  stopscan = () => {
    BleDeviceService.stopSCan();
    this.isScan = false;
  }

  getItemView = (device) => {
    return (
      <View className='at-row at-row__align--center device' onClick={() => {
        this.stopscan();
        super.navigateTo(`../device_com/index?deviceId=${device.deviceId}`);
      }}
      >
        <View className='at-col item'>{device.name}</View>
        <View className='at-col item'>{device.deviceId}</View>
        <View className='at-col item'>{device.RSSI}</View>
      </View>
    )
  }

  render() {

    return (
      <View className='device'>

        <AtButton onClick={() => {
          BleDeviceService.getBluState();
        }}>获取蓝牙状态</AtButton>

        <AtButton onClick={() => {
          BleDeviceService.openBlu();
        }}>初始化蓝牙</AtButton>

        <AtButton onClick={() => {
          if (this.isScan)
            this.stopscan();
          else
            this.scan();
        }}>{this.isScan ? "停止扫描" : "开始扫描"}</AtButton>

        <View style="marginTop: 10px">设备列表,点击列表即可连接:</View>
        <ScrollView
          className='device_list'
          scrollY={true}
          scrollWithAnimation={true}
        >
          {
            this.devices.map(device => {
                return this.getItemView(device);
              }
            )
          }
        </ScrollView>
      </View>
    )
  }
}

export default Device
